<template>
	<!-- #ifdef H5 -->
	<fui-sticky>
		<fui-nav-bar title="邀请好友" @leftClick="leftClick">
			<fui-icon name="arrowleft"></fui-icon>
		</fui-nav-bar>
	</fui-sticky>
	<!-- #endif -->

	<view style="padding: 0rpx 20rpx">
		<fui-bottom-popup background="rgba(0,0,0,0)" :show="shareShow">
			<fui-swiper-dot :styles="styles" :items="bgUrl" :current="current">
				<swiper previous-margin="60rpx" next-margin="60rpx" class="fui-banner__box" @change="change2" circular
					:indicator-dots="false">
					<swiper-item v-for="(item,index) in bgUrl" :key="index">
						<view class="poster fui-banner__item" :class="{'fui-item__scale':current!==index}"
							v-show="shareImg">
							<canvas canvas-id="qrcode" v-show="qrcodeShow" id="qrcode"
								style="width: 300px; height: 300px; position: relative; top: -999rpx" />
							<canvas :canvas-id="'myCanvas'+index" :style="{ height: ch, width: cw, left: 0 }"
								v-show="canvasShow" id="myCanvas"></canvas>
						</view>
					</swiper-item>
				</swiper>
			</fui-swiper-dot>
			<view class="shareBox">
				<view class="popMenu">
					<view class="saveShare">
						<view class="img">
							<img style="width: 100rpx;height: 100rpx;" @click="saveShareImg"
								src="https://image.3rdplanet.cn/upload/institutions/bcypdtb_icon%403x.png" alt="" />
						</view>
						<view>保存海报</view>
					</view>
					<view class="shareLink">
						<view class="img">
							<img @click="shareLink" style="width: 100rpx;height: 100rpx;"
								src="https://image.3rdplanet.cn/upload/institutions/fxljdtb_icon%403x.png" alt="" />
						</view>
						<view>复制链接</view>
					</view>
				</view>
			</view>
		</fui-bottom-popup>
		<view class="my-mask" v-show="shareImg"></view>
		<fui-loading v-if="loading" :isFixed="true" srcCol="/static/images/component/loading_white.png"
			text="正在生成海报..."></fui-loading>
	</view>
</template>

<script>
	import { ConfigStore } from "@/store/modules/config.js";
	import { LoginStore } from "@/store/modules/login.js";
	const api = uniCloud.importObject('qc-application', { customUI: true })
	import uQRCode from "@/utils/uqrcode.js"
	export default {
		data() {
			return {
				userInfo: LoginStore().userInfo,
				current: 0,
				shareShow: true,
				shareUrl: "", //下载链接
				bgUrl: [],
				phoneHeight: 10,
				qrcode: null,
				system_info: {},
				base64: '',
				canvasShow: true,
				qrcodeShow: false,
				cw: null,
				ch: null,
				cl: null,
				scroll: null,
				shareImg: false,
				blob: {},
				len: 0,
				loading: false
			}
		},
		computed: {
			config() {
				return ConfigStore().config
			},
			my_invite_code() {
				return LoginStore().userInfo.my_invite_code
			}

		},
		async onLoad() {
			const res = await api.getInvite()
			this.bgUrl = res.data
			this.len = res.data.length
			this.shareUrl = this.config.spreadUrl + `/#/pages/register/register?code=${this.my_invite_code}`
			this.openShareImg()
		},
		methods: {
			change2(e) {
				this.current = e.detail.current
			},
			share() {
				this.shareShow = true
			},
			// #ifdef H5
			leftClick() {
				uni.navigateBack()
			},
			// #endif
			openShareImg() {
				this.shareImg = true
				this.shareShow = true
				this.drawCanvas()
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url],
				})
			},
			shareLink() {
				uni.setClipboardData({
					data: this.shareUrl,
					showToast: false,
					success() {
						uni.showToast({
							title: '复制链接成功',
							icon: 'none',
							duration: 2000,
						})
					},
				})
			},
			drawCanvas() {
				this.qrcodeShow = true
				uQRCode.make({
						canvasId: 'qrcode',
						data: this.shareUrl,
						text: this.shareUrl,
						size: 300,
						margin: 5,
						fileType: 'png',
						backgroundPadding: 1
					})
					.then((res) => {
						this.qrcode = res
						this.qrcodeShow = false
						for (let i = 0; i <= this.len; i++) {
							this.getImg(i)
						}
					})
			},
			getImg(i) {
				var that = this
				const promise1 = new Promise((resolve, reject) => {
					uni.downloadFile({
						url: that.qrcode,
						success: function(res) {
							// #ifdef APP-PLUS
							resolve(that.qrcode)
							// #endif
							// #ifdef H5
							resolve(res.tempFilePath)
							// #endif
						},
					})
				})
				Promise.all([promise1]).then((values) => {
					// #ifdef APP-PLUS
					this.make_canvas(values, i)
					// #endif
					// #ifdef H5
					this.make_canvas(values[0], i)
					// #endif
				})
			},
			make_canvas(img01, i) {
				this.loading = true
				const systemInfo = uni.getSystemInfoSync()
				let ww = systemInfo.windowWidth //准确的宽高
				let hh = systemInfo.windowHeight
				var ctx = uni.createCanvasContext('myCanvas' + i) //绑定画布
				//根据图片比例来绘制图片，按实际情况填写
				// #ifdef APP-PLUS
				var proportion = 610 / 351
				// #endif
				// #ifdef H5
				var proportion = 655 / 351
				// #endif
				var canvasW = ww * 0.85
				var canvasH = proportion * canvasW
				this.cw = canvasW + 'px'
				this.ch = canvasH + 'px'
				this.cl = (ww - canvasW) / 2 + 'px'
				ctx.drawImage(this.bgUrl[i]?.invite_img, 0, 0, canvasW, canvasH) //填充进图片
				// #ifdef APP-PLUS
				ctx.drawImage(img01, canvasW * 0.68, canvasH * 0.77, 80, 80) //填充进图片
				// #endif
				// #ifdef H5
				ctx.drawImage(img01, canvasW * 0.68, canvasH * 0.77, 80, 80) //填充进图片
				// #endif
				ctx.font = "12px Microsoft YaHei";
				ctx.fillStyle = "#000";
				ctx.fillText("邀请码：" + this.userInfo.my_invite_code, canvasW * 0.68, canvasH * 0.94, 80);
				setTimeout(() => {
					//不加延迟的话，base64有时候会赋予undefined
					ctx.draw()
					setTimeout(() => {
						uni.canvasToTempFilePath({
							canvasId: 'myCanvas' + this.current,
							success: (res) => {
								this.base64 = res.tempFilePath
							},
						})
					}, 1000)
					this.loading = false
				}, 1000)
			},
			//保存海报
			saveShareImg() {
				this.savePoster()
			},
			savePoster() {
				// #ifdef APP-PLUS
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas' + this.current,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							// 然后调用这个方法
							filePath: res.tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '图片已保存',
								})
							},
							fail: (res) => {

							},
						})
					},
				})

				// #endif
				// #ifdef H5
				console.log('H5');
				uni.canvasToTempFilePath({
					canvasId: 'myCanvas' + this.current,
					success: (res) => {
						console.log(res);
						//把base64转换成Blob数据
						uni.downloadFile({
							url: res.tempFilePath,
							success: (res) => {
								//创建一个a标签
								var link = document.createElement('a')
								//把a标签的href属性赋值到生成好了的url
								link.href = res.tempFilePath
								//通过a标签的download属性修改下载图片的名字
								link.download = '邀请好友.png'
								//让a标签的click函数，直接下载图片
								link.click()
							},
						})
					},fail(err) {
						uni.fui.toast('请截图或复制链接')
					}
				})
				// #endif
			},
			closeQrCode() {
				this.shareImg = false
				this.shareShow = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	.fui-bottom__popup-wrap {
		background: #F7F7F5 !important;
	}

	.img {
		margin: auto;
	}

	.shareLink {
		flex-direction: column;
		display: flex;
		justify-content: center;
	}

	.saveShare {
		flex-direction: column;
		display: flex;
		justify-content: center;
	}

	.popMenu {
		font-size: 26rpx;
		background-color: #fff;
		padding: 32rpx 32rpx 50rpx 32rpx;
		display: flex;
		justify-content: space-around;
	}

	.fui-share__ic {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.fui-banner__cell {
		width: 100%;
		height: 70vh;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 24rpx;
		transition: transform .1s linear;
	}

	.fui-item__scale {
		transform: scale3d(.9, .9, 1);
	}

	.uqrcode {
		position: absolute;
		bottom: 400rpx;
		z-index: 999;
	}

	.fui-share__ic {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.fui-banner__box {
		height: 81vh;
	}

	.fui-banner__cell {
		width: 100%;
		height: 80vh;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 34rpx;
		font-weight: 600;
		border-radius: 24rpx;
		transition: transform .1s linear;
	}

	.fui-item__scale {
		transform: scale3d(.9, .9, 1);
	}
</style>